<template>
  <div class="q-pa-md">
    <div class="row items-start q-gutter-md">
      <t-card flat bordered class="col">
        <t-item>
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </t-avatar>
          </t-item-section>

          <t-item-section>
            <t-item-label>Title</t-item-label>
            <t-item-label caption> Subhead </t-item-label>
          </t-item-section>
        </t-item>

        <t-separator />

        <t-responsive :ratio="16 / 9">
          <!-- notice "border-radius-inherit" below; it's important when in a QCard -->
          <t-card-section class="border-radius-inherit flex flex-center">
            <div>QCardSection with ratio 16:9</div>
          </t-card-section>
        </t-responsive>
      </t-card>

      <t-card flat bordered class="col">
        <t-item>
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </t-avatar>
          </t-item-section>

          <t-item-section>
            <t-item-label>Title</t-item-label>
            <t-item-label caption> Subhead </t-item-label>
          </t-item-section>
        </t-item>

        <t-separator />

        <t-responsive :ratio="1">
          <!-- notice "border-radius-inherit" below; it's important when in a QCard -->
          <t-card-section class="border-radius-inherit flex flex-center">
            <div>QCardSection with ratio 1:1</div>
          </t-card-section>
        </t-responsive>
      </t-card>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        slide: ref(1),
      };
    },
  };
</script>
